
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>钢琴</title>
	<style>
		html
		{
			height: 100%;
		}
		body
		{
			height: 100%;
/*			设置背景颜色径向渐变*/
			background:radial-gradient(#500,#000) ;
/*			设置元素为弹性元素*/
			display:flex;
/*			设置竖直方向居中显示*/
			align-items:center;
/*			设置水平方向居中显示*/
			justify-content:center;
/*			设置body外边框0px*/
			margin: 0px;
		}
		main
		{
			width: 800px;
			
			height: 400px;
			
			background-image: url(keys.png) ;
			
			background-size: 100% 100%;
/*			margin: 0 auto;*/
/*          设置边框  18个像素的宽  实线 深灰色*/
			border: 18px solid #111;
/*          设置盒子阴影
            值一：水平方向的距离 
			值二：垂直方向的距离
			值三：阴影的宽度 
			值四：阴影的颜色 */
			box-shadow: 0px 0px 30px darkred;
/*			重新设置上下边框的宽度*/
			border-top-width: 40px ;
			
			border-bottom-width: 8px ;
/*			设置盒子的尺寸
            border-box = width height
			内容（）＋内间距（）＋边框（） */
			box-sizing: border-box;
			
			display: flex;
			
			
		}
		div
		{
			border: 1px  solid #000;
			height: 100%;
			flex-grow:1;
		}
		div:active
		{   
/*			radial-gradient()径向渐变
            linear-gradient()线性渐变*/
			background: linear-gradient(black,black,#660000);
			
		}
		.keyAffect
		{
			background: linear-gradient(rgba(0, 0,0, 0),rgba(200, 200,200, 0.5));
		}
		
	</style>
</head>
<body>
	<main>
		<audio src="notes/1.oga"></audio>
		<audio src="notes/2.oga"></audio>
		<audio src="notes/3.oga"></audio>
		<audio src="notes/4.oga"></audio>
		<audio src="notes/5.oga"></audio>
		<audio src="notes/6.oga"></audio>
		<audio src="notes/7.oga"></audio>
		<audio src="notes/8.oga"></audio>
		<audio src="notes/9.oga"></audio>
<!--		 onclick  ""后面的是方法名字	-->
		<div onclick="play(0)"></div>
		<div onclick="play(1)"></div>
		<div onclick="play(2)"></div>
		<div onclick="play(3)"></div>
		<div onclick="play(4)"></div>
		<div onclick="play(5)"></div>
		<div onclick="play(6)"></div>
		<div onclick="play(7)"></div>
		<div onclick="play(8)"></div>
		
	</main>
	<script>
//		query 查询 selector选择器  all所有的
		var audios = document.querySelectorAll('audio')
//		找到所有的div标签
		var divs = document.querySelectorAll("div")
		
		function play(index) 
		{   
//			取出对应的声音
			var audio = audios[index]
//			重新加载声音
			audio.load();
//			播放声音 
			audio.play()
		}
		var code = 0
		window.onkeydown = function (event) 
		{
			console.log(event.keyCode)
			
			if(code !=event.keyCode-49)
			{	
//				判断所按的键是否是数字键1～9
				if (49<= event.keyCode && event.keyCode<=57) 
			{
				play(event.keyCode -49);
				
				divs[event.keyCode-49].classList.add('keyAffect')
			}
			}
	
			
			
		}
		window.onkeyup = function () 
		{   
			code = 100
			for(var index = 0 ;index <divs.length ;index++)
			{
				divs[index].classList.remove('keyAffect')
			}
		}
	</script>

</body>

</html>